/*
 * @Description:
 * @Autor: lcz
 * @Date: 2022-08-26 19:44:14
 * @LastEditors: lcz
 * @LastEditTime: 2022-08-29 10:15:49
 */
import { useMemo, useRef } from 'react'
import { Workbook, WorkbookInstance } from '@fortune-sheet/react'
import '@fortune-sheet/react/dist/index.css'

const ExcelCom = () => {
  const WorkbookRef = useRef<WorkbookInstance>(null)
  const boxRef = useRef(null)
  const settings = useMemo(() => {
    let celldataLocal = localStorage.getItem('name')
    let celldata = celldataLocal
      ? JSON.parse(celldataLocal)
      : [
          {
            name: 'Sheet1',
            id : "0",
            index:'0',
            scrollTop : 418,
            scrollLeft:0,
            order:0,
            celldata: [
              {
                r: 0,
                c: 0,
                v: null,
              },
            ],
          },
        ]
    return {
      data: celldata, // sheet data
      row: 10,
      column: 10,
      onChange: (data: any) => {
        console.log(data)
      }, // onChange event
      onOp: (data: any) => {
        console.log(data,'onOp')
      }, // onChange event
      lang: 'zh', // set language
      showToolbar: true, //是否显示工具栏
      showSheetTabs: true, //是否显示底部sheet页按钮
      showFormulaBar: true, //是否显示公式栏
      defaultFontSize: 11,//初始化默认字体大小
      rowHeaderWidth: 46,//行标题区域的宽度，如果设置为0，则表示隐藏行标题
      columnHeaderHeight:20, // 列标题区域的高度，如果设置为0，则表示隐藏列标题
      devicePixelRatio: (window as any).devicePixelRatio, //设备比例，比例越大表格分辨率越高
      // More other settings...
    }
  }, [])
  const save = () => {
    let value = JSON.stringify(WorkbookRef.current?.getAllSheets())
    localStorage.setItem('name', value)
  }
  return (
    <div
      style={{
        width: '100%',
        height: `calc(100vh)`,
      }}
      ref={boxRef}
    >
      <Workbook {...settings} ref={WorkbookRef} />
      <div onClick={save}>保存数据</div>
    </div>
  )
}
export default ExcelCom
